<template>
    <section class="invoice-container">
        <section class="box">
            <!-- 发票的状态 -->
            <section class="invoice-block invoice-status">
                <section>
                    <template v-if="data.invoiceStatus">
                        <img src="../../../../assets/images/finish.svg" alt="" />
                        <p>开票成功</p>
                        <span>共{{ data.detailedOrderList.length }}张发票</span>
                    </template>
                    <template v-else>
                        <img src="../../../../assets/images/waiting.svg" alt="" />
                        <p>开票中</p>
                        <span>您的发票申请已受理，请耐心等候~</span>
                    </template>
                </section>
            </section>
            <!-- 发票内容 -->
            <section class="invoice-block invoice-content">
                <section class="li" v-for="item in data.invoiceContent" :key="item.name">
                    <section class="title">{{ item.name }}</section>
                    <section class="info">{{ item.value }}</section>
                </section>
            </section>
            <!-- 统计 -->
            <section class="invoice-block invoice-content invoice-count">
                <section class="li" @click="data.onOpenInvoiceOrder">
                    <section class="title">共计订单</section>
                    <section class="info">
                        <p>{{ data.orderNumber }}</p>
                        <span class="iconfont icon-arrow-right"></span>
                    </section>
                </section>
            </section>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import InvoiceDetailed from '.'

//初始化数据
const data = reactive(new InvoiceDetailed())
</script>

<style scoped lang="scss">
.invoice-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
}
.box {
    box-sizing: border-box;
    padding: var(--cxl-size-16);
}
.invoice-block {
    background-color: var(--cxl-color-white);
    border-radius: var(--cxl-size-6);
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    margin-bottom: var(--cxl-size-10);
}
.invoice-status {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    img {
        display: block;
        width: 5.83rem;
        height: 5.83rem;
        margin: auto;
    }
    p {
        font-size: var(--cxl-size-18);
        font-weight: 600;
        color: var(--cxl-color-333333);
        margin: var(--cxl-size-8) 0;
    }
    span {
        font-size: var(--cxl-size-14);
        color: var(--cxl-color-999999);
    }
}
.invoice-content {
    .li {
        display: flex;
        &:not(:last-child) {
            margin-bottom: var(--cxl-size-18);
        }

        > section {
            font-size: var(--cxl-size-16);
            color: var(--cxl-color-333333);
        }
        .title {
            width: 8rem;
        }
        .info {
            width: calc(100% - 8rem);
        }
    }
    &.invoice-count {
        .li {
            .info {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                p {
                    color: var(--cxl-color-primary);
                    margin-right: var(--cxl-size-6);
                }
            }
        }
    }
}
</style>
